<template>
  <el-dialog title="添加角色" :visible.sync="adddialogVisible">
    <el-form ref="roleDTO" :model="roleDTO" :rules="rules" class="demo-ruleForm">
      <el-form-item label="角色名称" prop="name" :label-width="formLabelWidth">
        <el-input id="txtRoleName" v-model="roleDTO.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色编号" prop="code" :label-width="formLabelWidth">
        <el-input id="txtRoleCode" v-model="roleDTO.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色备注" prop="remark" :label-width="formLabelWidth">
        <el-input id="txtRemark" v-model="roleDTO.remark" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用">
        <template>
          <el-radio v-model="roleDTO.status" :label="1">是</el-radio>
          <el-radio v-model="roleDTO.status" :label="0">否</el-radio>
        </template>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button id="btnAddRoleOK" type="primary" @click="addRole">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddDialog',
  props: {
    adddialogVisible: {
      require: true,
      type: Boolean,
      default: function() {
        return false
      }
    },
    roleDTO: {
      require: true,
      type: Object,
      default: function() {
        return {}
      }
    },
    formLabelWidth: {
      require: true,
      type: String,
      default: function() {
        return {}
      }
    },
    rules: {
      require: true,
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    addRole() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
